<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>洞洞板定制计算器</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .calculator {
            background-color: white;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 500px;
            padding: 30px;
            transition: all 0.3s ease;
        }
        
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .subtitle {
            text-align: center;
            color: #7f8c8d;
            margin-bottom: 30px;
            font-size: 14px;
        }
        
        .input-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            color: #34495e;
            font-weight: 500;
        }
        
        .option-group {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
        }
        
        .option {
            flex: 1;
            text-align: center;
            padding: 15px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .option:hover {
            border-color: #3498db;
        }
        
        .option.selected {
            border-color: #3498db;
            background-color: #f0f8ff;
        }
        
        .option h3 {
            margin-bottom: 5px;
            color: #2c3e50;
        }
        
        .option p {
            font-size: 14px;
            color: #7f8c8d;
        }
        
        .dimension-inputs {
            display: flex;
            gap: 15px;
        }
        
        .dimension-input {
            flex: 1;
            position: relative;
        }
        
        input[type="number"] {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: border 0.3s;
        }
        
        input[type="number"]:focus {
            border-color: #3498db;
            outline: none;
        }
        
        .unit {
            position: absolute;
            top: 12px;
            right: 15px;
            color: #7f8c8d;
            pointer-events: none;
        }
        
        .results {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-top: 20px;
        }
        
        .result-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eaeaea;
        }
        
        .result-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .result-label {
            color: #7f8c8d;
        }
        
        .result-value {
            font-weight: 600;
            color: #2c3e50;
        }
        
        .profit {
            color: #27ae60;
            font-weight: 700;
            font-size: 18px;
        }
        
        .price {
            color: #e74c3c;
            font-weight: 700;
        }
        
        .cost {
            color: #f39c12;
            font-weight: 700;
        }
        
        .note {
            margin-top: 20px;
            font-size: 12px;
            color: #95a5a6;
            text-align: center;
        }
        
        @media (max-width: 480px) {
            .calculator {
                padding: 20px;
            }
            
            .dimension-inputs {
                flex-direction: column;
                gap: 10px;
            }
            
            .option-group {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="calculator">
        <h1>洞洞板定制计算器</h1>
        <p class="subtitle">输入尺寸，快速计算成本和利润</p>
        
        <div class="input-group">
            <label>选择类型</label>
            <div class="option-group">
                <div class="option selected" id="patterned">
                    <h3>有图案</h3>
                    <p>售价: 500元/㎡<br>成本: 330元/㎡</p>
                </div>
                <div class="option" id="plain">
                    <h3>无图案</h3>
                    <p>售价: 450元/㎡<br>成本: 300元/㎡</p>
                </div>
            </div>
        </div>
        
        <div class="input-group">
            <label>尺寸（厘米）</label>
            <div class="dimension-inputs">
                <div class="dimension-input">
                    <input type="number" id="length" placeholder="长度" min="1" step="0.1">
                    <div class="unit">cm</div>
                </div>
                <div class="dimension-input">
                    <input type="number" id="width" placeholder="宽度" min="1" step="0.1">
                    <div class="unit">cm</div>
                </div>
            </div>
        </div>
        
        <div class="results">
            <div class="result-item">
                <span class="result-label">面积</span>
                <span class="result-value" id="area">0.00 ㎡</span>
            </div>
            <div class="result-item">
                <span class="result-label">售价</span>
                <span class="result-value price" id="price">0.00 元</span>
            </div>
            <div class="result-item">
                <span class="result-label">成本</span>
                <span class="result-value cost" id="cost">0.00 元</span>
            </div>
            <div class="result-item">
                <span class="result-label">利润</span>
                <span class="result-value profit" id="profit">0.00 元</span>
            </div>
        </div>
        
        <p class="note">注：1平方米 = 10000平方厘米</p>
    </div>

    <script>
        // 获取DOM元素
        const patternedOption = document.getElementById('patterned');
        const plainOption = document.getElementById('plain');
        const lengthInput = document.getElementById('length');
        const widthInput = document.getElementById('width');
        const areaDisplay = document.getElementById('area');
        const costDisplay = document.getElementById('cost');
        const priceDisplay = document.getElementById('price');
        const profitDisplay = document.getElementById('profit');
        
        // 价格配置
        const priceConfig = {
            patterned: {
                pricePerSqm: 500,
                costPerSqm: 330
            },
            plain: {
                pricePerSqm: 450,
                costPerSqm: 300
            }
        };
        
        // 当前选择的类型
        let currentType = 'patterned';
        
        // 选择类型事件
        patternedOption.addEventListener('click', function() {
            setType('patterned');
        });
        
        plainOption.addEventListener('click', function() {
            setType('plain');
        });
        
        // 设置类型函数
        function setType(type) {
            currentType = type;
            
            // 更新UI选择状态
            if (type === 'patterned') {
                patternedOption.classList.add('selected');
                plainOption.classList.remove('selected');
            } else {
                patternedOption.classList.remove('selected');
                plainOption.classList.add('selected');
            }
            
            // 重新计算
            calculate();
        }
        
        // 输入事件监听
        lengthInput.addEventListener('input', calculate);
        widthInput.addEventListener('input', calculate);
        
        // 计算函数
        function calculate() {
            // 获取输入值
            const length = parseFloat(lengthInput.value) || 0;
            const width = parseFloat(widthInput.value) || 0;
            
            // 计算面积（平方厘米转平方米）
            const areaSqcm = length * width;
            const areaSqm = areaSqcm / 10000;
            
            // 获取当前类型的价格配置
            const config = priceConfig[currentType];
            
            // 计算成本、售价和利润
            const cost = areaSqm * config.costPerSqm;
            const price = areaSqm * config.pricePerSqm;
            const profit = price - cost;
            
            // 更新显示
            areaDisplay.textContent = areaSqm.toFixed(2) + ' ㎡';
            priceDisplay.textContent = price.toFixed(2) + ' 元';
            costDisplay.textContent = cost.toFixed(2) + ' 元';
            profitDisplay.textContent = profit.toFixed(2) + ' 元';
        }
        
        // 初始化计算
        calculate();
    </script>
</body>
</html>